<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
  <title>信易游</title>
  <link href="https://cdn.bootcss.com/normalize/8.0.0/normalize.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/mui/3.4.0/css/mui.min.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/mui/3.4.0/js/mui.min.js"></script>
  <link href="./css/result/style.css" rel="stylesheet">
  <script type="text/javascript">
    (function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          var clientWidth = docEl.clientWidth
          if (!clientWidth) return
          docEl.style.fontSize = 75 * (clientWidth / 375) + 'px'
        }
      if (!doc.addEventListener) return
      win.addEventListener(resizeEvt, recalc, false)
      doc.addEventListener('DOMContentLoaded', recalc, false)
    })(document, window)
  </script>
</head>
<body>
<div>
  <header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: rgba(46,46,46,0.60);"></a>
    <h1 class="mui-title">信易游</h1>
  </header>
  <!--申请成功代码段-->
  <div class="result-box">
    <img src="./images/icon_success3.png" alt="" class="result-image">
    <div class="result-title">申请结果</div>
    <div class="result-desc">您成功申请到的物品</div>
    <div class="result-products">
      <div class="product">
        <div class="product-title">自动折叠雨伞</div>
        <div class="product-number">+1</div>
      </div>
      <div class="product">
        <div class="product-title">2000毫安充电宝</div>
        <div class="product-number">+1</div>
      </div>
      <div class="dash-line"></div>
      <div class="product">
        <div class="product-title">一次性雨衣</div>
        <div class="product-number">+1</div>
      </div>
      <div class="product">
        <div class="product-title">300ml瓶装饮用水</div>
        <div class="product-number">+1</div>
      </div>
    </div>
    <div class="result-tips">请联系景区管理员领取</div>
    <button type="button" class="mui-btn mui-btn-outlined submit-btn mui-action-back">确认</button>
  </div>
  <!--申请失败代码段-->
  <div class="result-box">
    <img src="./images/icon_fail.png" alt="" class="result-image">
    <div class="result-title">申请结果</div>
    <div class="result-desc">部分物品库存不足</div>
    <div class="result-products">
      <div class="product error-color">
        <div class="product-title">自动折叠雨伞</div>
        <div class="product-number">0</div>
      </div>
      <div class="product error-color">
        <div class="product-title">2000毫安充电宝</div>
        <div class="product-number">0</div>
      </div>
      <div class="dash-line"></div>
      <div class="product">
        <div class="product-title">一次性雨衣</div>
        <div class="product-number">+1</div>
      </div>
      <div class="product">
        <div class="product-title">300ml瓶装饮用水</div>
        <div class="product-number">+1</div>
      </div>
    </div>
    <div class="result-tips">请联系景区管理员领取</div>
    <button type="button" class="mui-btn mui-btn-outlined submit-btn mui-action-back">确认</button>
  </div>
  <!--归还成功代码段-->
  <div class="result-box">
    <img src="./images/icon_success3.png" alt="" class="result-image">
    <div class="result-title">归还成功</div>
    <div class="result-desc">谢谢您的参与</div>
    <button type="button" class="mui-btn mui-btn-outlined submit-btn mui-action-back">确认</button>
  </div>
  <!--归还失败代码段-->
  <div class="result-box">
    <img src="./images/icon_fail.png" alt="" class="result-image">
    <div class="result-title">归还失败</div>
    <div class="result-desc">
      原因：“物品损坏”
      <br>
      请联系管理员
    </div>
    <button type="button" class="mui-btn mui-btn-outlined submit-btn mui-action-back">确认</button>
  </div>
</div>
</body>
</html>